<template>
    <div class="wrap">
        <div v-for="(item, index) in fromEmailList" class="row">
            <div class="title">{{ index === 0 ? '发件人' : '或' }} 包含</div>
            <el-input class="input" size="small" v-model="item.content" placeholder="请输入" />
            <i class="iconfont icon-plus" v-if="index === 0" @click="handlerAdd('fromEmail')" />
            <i class="iconfont icon-minus" v-else @click="handlerDel('fromEmail', index)" />
        </div>
        <div v-for="(item, index) in toEmailList" class="row">
            <div class="title">{{ index === 0 ? '收件人' : '或' }} 包含</div>
            <el-input class="input" size="small" v-model="item.content" placeholder="请输入" />
            <i class="iconfont icon-plus" v-if="index === 0" @click="handlerAdd('toEmail')" />
            <i class="iconfont icon-minus" v-else @click="handlerDel('toEmail', index)" />
        </div>
        <div v-for="(item, index) in subjectList" class="row">
            <div class="title">{{ index === 0 ? '主题' : '或' }} 包含</div>
            <el-input class="input" size="small" v-model="item.content" placeholder="请输入" />
            <i class="iconfont icon-plus" v-if="index === 0" @click="handlerAdd('subject')" />
            <i class="iconfont icon-minus" v-else @click="handlerDel('subject', index)"  />
        </div>
        <div v-for="(item, index) in bodyList" class="row">
            <div class="title">{{ index === 0 ? '正文' : '或' }} 包含</div>
            <el-input class="input" size="small" v-model="item.content" placeholder="请输入" />
            <i class="iconfont icon-plus" v-if="index === 0" @click="handlerAdd('body')" />
            <i class="iconfont icon-minus" v-else @click="handlerDel('body', index)" />
        </div>
        <div v-for="(item, index) in annexlList" class="row">
            <div class="title">{{ index === 0 ? '附件' : '或' }} 包含</div>
            <el-input class="input" size="small" v-model="item.content" placeholder="请输入" />
            <i class="iconfont icon-plus" v-if="index === 0"  @click="handlerAdd('annex')" />
            <i class="iconfont icon-minus" v-else @click="handlerDel('annex', index)" />
        </div>
        <div class="btn_con">
            <el-button @click="handlerClose" size="small">关闭</el-button>
            <el-button @click="handlerSearch" class="search_btn" size="small">搜索</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, ref, onMounted } from 'vue';

type SearchItem = {
    content: string;
    key?: string;
}

const props = defineProps({
    searchList: {
        type: Object,
        default: [],
    },
});

const emit = defineEmits(['close', 'search']);

const fromEmailList = ref<SearchItem[]>([{ content: '' }]);
const toEmailList = ref<SearchItem[]>([{ content: '' }]);
const subjectList = ref<SearchItem[]>([{ content: '' }]);
const bodyList = ref<SearchItem[]>([{ content: '' }]);
const annexlList = ref<SearchItem[]>([{ content: '' }]);

const handlerAdd = (type: string) => {
    if (type === 'fromEmail') {
        fromEmailList.value.push({
            content: ''
        });
    } else if (type === 'toEmail') {
        toEmailList.value.push({
            content: ''
        });
    } else if (type === 'subject') {
        subjectList.value.push({
            content: ''
        });
    } else if (type === 'body') {
        bodyList.value.push({
            content: ''
        });
    } else if (type === 'annex') {
        annexlList.value.push({
            content: ''
        });
    }
};

const handlerDel = (type: string, num: number) => {
    if (type === 'fromEmail') {
        fromEmailList.value = fromEmailList.value.filter((item: any, index: number) => index !== num);
    } else if (type === 'toEmail') {
        toEmailList.value = toEmailList.value.filter((item: any, index: number) => index !== num);
    } else if (type === 'subject') {
        subjectList.value = subjectList.value.filter((item: any, index: number) => index !== num);
    } else if (type === 'body') {
        bodyList.value = bodyList.value.filter((item: any, index: number) => index !== num);
    } else if (type === 'annex') {
        annexlList.value = annexlList.value.filter((item: any, index: number) => index !== num);
    }
};

const handlerSearch = () => {
    let allList = [];
    let allKeyList = [];
    for (let i = 0;i < fromEmailList.value.length; i++) {
        let cur = fromEmailList.value[i];
        if (cur.key) {
            let hasTo = toEmailList.value.some((item: any) => cur.key === item.key && cur.content === item.content);
            let hasSu = toEmailList.value.some((item: any) => cur.key === item.key && cur.content === item.content);
            let hasBo = toEmailList.value.some((item: any) => cur.key === item.key && cur.content === item.content);
            let hasAn = toEmailList.value.some((item: any) => cur.key === item.key && cur.content === item.content);

            if (hasTo && hasSu && hasBo && hasAn) {
                allList.push({
                    searchKey: 'all',
                    searchValue: cur.content
                });
                allKeyList.push(cur.key);
            }
        }
    }

    let fromList = fromEmailList.value.filter(item => item.content && !allKeyList.includes(item.key)).map(item => {
        return {
            searchKey: 'fromEmail',
            searchValue: item.content
        }
    });
    let toList = toEmailList.value.filter(item => item.content && !allKeyList.includes(item.key)).map(item => {
        return {
            searchKey: 'toEmail',
            searchValue: item.content
        }
    });
    let suList = subjectList.value.filter(item => item.content && !allKeyList.includes(item.key)).map(item => {
        return {
            searchKey: 'subject',
            searchValue: item.content
        }
    });
    let boList = bodyList.value.filter(item => item.content && !allKeyList.includes(item.key)).map(item => {
        return {
            searchKey: 'bodyText',
            searchValue: item.content
        }
    });
    let anList = annexlList.value.filter(item => item.content && !allKeyList.includes(item.key)).map(item => {
        return {
            searchKey: 'annex',
            searchValue: item.content
        }
    });


    emit('search', [...allList, ...fromList, ...toList, ...suList, ...boList, ...anList]);
};

const handlerClose = () => {
    emit('close');
};

const init = () => {
    const { searchList } = props;
    if (searchList && searchList.length) {
        const fromList: SearchItem[] = [];
        const toList: SearchItem[] = [];
        const sList: SearchItem[] = [];
        const bList: SearchItem[] = [];
        const aList: SearchItem[] = [];
        searchList.forEach((item: any, index: number) => {
            if (item.searchKey === 'all') {
                fromList.push({
                    key: index + '',
                    content: item.searchValue
                });
                toList.push({
                    key: index + '',
                    content: item.searchValue
                });
                sList.push({
                    key: index + '',
                    content: item.searchValue
                });
                bList.push({
                    key: index + '',
                    content: item.searchValue
                });
                aList.push({
                    key: index + '',
                    content: item.searchValue
                });
            } else if (item.searchKey === 'fromEmail') {
                fromList.push({
                    content: item.searchValue
                });
            } else if (item.searchKey === 'toEmail') {
                toList.push({
                    content: item.searchValue
                });
            } else if (item.searchKey === 'subject') {
                sList.push({
                    content: item.searchValue
                });
            } else if (item.searchKey === 'bodyText') {
                bList.push({
                    content: item.searchValue
                });
            } else if (item.searchKey === 'annex') {
                aList.push({
                    content: item.searchValue
                });
            }
        });

        if (fromList.length) {
            fromEmailList.value = fromList;
        }

        if (toList.length) {
            toEmailList.value = toList;
        }

        if (sList.length) {
            subjectList.value = sList;
        }

        if (bList.length) {
            bodyList.value = bList;
        }

        if (aList.length) {
            annexlList.value = aList;
        }
    }
};

onMounted(() => init());
</script>
<style lang="scss" scoped>
.wrap {
    position: absolute;
    background: #eee;
    z-index: 1;
    padding: 10px;
    width: 300px;
}

.row {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

.title {
    width: 70px;
    text-align: right;
    margin-right: 10px;
}

.iconfont {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #eee;
    background-color: #ccc;
    line-height: 16px;
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
}

.input {
    flex: 1;
}

.btn_con {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    text-align: right;
}

.search_btn {
    background-color: #f73131;
    color: #fff;
}
</style>  
